<!--
<template>
  &lt;!&ndash;  <div>
      <iframe :src="this.url" id="iframe" style="width: 100%;" @load="sureHeight"></iframe>
  &lt;!&ndash;    <pdf ref="pdf" :src="this.url"></pdf>&ndash;&gt;
    </div>&ndash;&gt;

  <div>
    {{this.url}}
    &lt;!&ndash;    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>&ndash;&gt;
    <iframe :src="url" id="iframe" style="width: 100%;" @load="sureHeight"></iframe>
&lt;!&ndash;    <embed src="../../static/鸟哥的%20Linux%20私房菜电子书.pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">&ndash;&gt;
&lt;!&ndash;    <div id="example1"></div>&ndash;&gt;
    <div id="documentViewer" class="flexpaper_viewer"></div>
  </div>
</template>

&lt;!&ndash;<script src="../plugins/pdfobject.js"></script>&ndash;&gt;

&lt;!&ndash;<script>PDFObject.embed("../../static/鸟哥的 Linux 私房菜电子书.pdf", "#example1");</script>&ndash;&gt;

<script>
export default {
  name: "Read",
  data(){
    return{
      bookId: this.$route.params.bookId,
      books: '',
      url:'',
      baseurl: ''
    }
  },
  created() {
    var vm = this
    console.log(this.bookId)
    axios.get('http://localhost:8082/book-manager/book/findBookById?bookId='+vm.bookId).then(function (resp){
      console.log(resp.data)
      vm.books = resp.data
      //baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用
      var baseurl = resp.data.book.ebookaddress;
      // vm.url = baseurl;
      // baseurl = '../../static/鸟哥的 Linux 私房菜电子书.pdf'
      // ie有缓存加个随机数解决 + '?r=' + new Date()
      // let pSrc = baseurl;
      vm.url = '../../static/pdf/web/viewer.html?file=' + encodeURIComponent(baseurl);
      // 本地请求文件
      // let filePath = encodeURIComponent('C:\\Users\\Karl\\Desktop\\鸟哥的 Linux 私房菜电子书.pdf')
      // 跨域请求文件，需走后台代理
      // let filePath2 = encodeURIComponent(resp.data.book.ebookaddress)
      // pdf文档展示的页面
      // this.url = '../static/pdf/web/viewer.html?file=' + filePath2
      var options = {
        forcePDFJS: true,
        PDFJS_URL: "../static/pdf/web/viewer.html"
      };
      var myPDF = PDFObject.embed(baseurl,"#documentViewer",options);
    })
  },
  // 模块渲染时执行
  mounted () {
    // 本地请求文件
    // let filePath = encodeURIComponent('/static/pdf/web/compressed.tracemonkey-pldi-09.pdf')
    // 跨域请求文件，需走后台代理
    // let filePath2 = encodeURIComponent(this.baseurl)
    // // pdf文档展示的页面
    // this.url = '../static/pdf/web/viewer.html?file=' + filePath2
  },
  // 定义模块测试方法
  methods: {
    // 此方法用于动态确定元素iframe的高度，使展示的pdf文档占满整个屏幕
    sureHeight: function () {
      let element = document.getElementById('iframe')
      element.style.height = window.screen.height + 'px'
    }
  },
  components:{
    pdf
  }

}
</script>


<style scoped>

</style>

-->


<template>
  <div>
    <pdf
        ref="pdf"
        :src="url"
    >
    </pdf>
  </div>
</template>


<script>
import pdf from 'vue-pdf'

export default {
  name: "detail",
  components: {
    pdf
  },
  data() {
    return {
      loading: true,   // 显示加载效果
      src: '',
      numPages: undefined, // 总页数
      curPageNum: 0, //当前页
      bookId: this.$route.params.bookId,
      books: '',
      url:'',
      baseurl: ''
    }
  },
  created() {
    var vm = this
    console.log(this.bookId)
    axios.get('http://localhost:8082/book-manager/book/findBookById?bookId='+vm.bookId).then(function (resp){
      console.log(resp.data)
      vm.books = resp.data
      vm.url = resp.data.book.ebookaddress
    })
  }
}
</script>
<style lang="less">
.hide{
  visibility: hidden;
}
</style>
